<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>英雄技能列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <!-- 如果有其他自定义CSS，也可以在这里引入 -->
</head>
<body>
<div class="section">
    <h1 class="title is-1 is-centered">英雄技能列表</h1>
    <div class="buttons is-centered is-marginless">
        <a class="button is-primary" th:href="@{addskills}">添加技能</a>
    </div>

    <table class="table is-striped is-fullwidth is-hoverable is-centered">
        <thead>
        <!-- ... 表格头部保持不变 ... -->
        </thead>
        <tbody>
        <tr th:each="showSkills : ${showSkills}">
            <!-- ... 表格行保持不变，但你可以添加一些Bulma的样式类，如is-vcentered来垂直居中内容 ... -->
            <td th:text="${showSkills.skillId}" class="py-2"></td>
            <!-- ... 其他列 ... -->
            <td>
                <a class="button is-small is-link" th:href="@{|update/${showSkills.skillId}|}">更新</a>
            </td>
            <td>
                <a class="button is-small is-danger" th:href="@{'delete/' + ${showSkills.skillId}}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>